<!--
 * @Description: 减脂营详情信息
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-05-12 11:25:40
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-22 19:48:47
 -->
<template>
  <div class="app-container">
    <div class="setting_time">
      <div class="camp_pp_nm"><span>{{ campDetail.camp_name }}</span> 【共{{ peopleCount }}人】</div>

      <div class="set-start">
        设置开营时间：
        <el-date-picker v-model="startDate" :disabled="!canChangeStart" size="small" type="date" placeholder="设置开营时间" class="user-input" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="startPicker" />
        <div class="tips">tips：开营时间一旦确定请不要轻易更改，否则会重置减脂营用户的订单周期</div>
      </div>
      
      <div class="btn-box" >
        <el-button size="small" class="btn-time" @click="setDisabled" v-if="!canChangeStart">修改时间</el-button>
        <el-button type="primary" size="small" @click="setStartDate" v-if="canChangeStart">确认修改</el-button>
        <el-button type="success" size="small" @click="syncChatUser">同步群用户</el-button>
      </div>
      
      <!-- 食谱和视频信息 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="食谱信息：">
          <el-select v-model="recipeId" filterable size="small" placeholder="请选择食谱" class="cycle-input" @change="setRecipe">
            <el-option v-for="item in recipeOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> &nbsp; &nbsp; &nbsp;
        <el-form-item label="视频选择：">
          <el-select v-model="sportType" size="small" placeholder="请选择视频" :disabled="+recipeId === 0"  class="cycle-input" @change="setSportType">
            <el-option v-for="(label, index) in videoTypeOptions" :key="index" :label="label" :value="index" />
          </el-select>
        </el-form-item>
        <pullServiceOrder :camp-id="+campId" />
      </el-form>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="排行榜" name="rank">
        <div class="rank-list-block">
          <rank ref="rank" />
        </div>          
      </el-tab-pane>
      <el-tab-pane label="用户列表" name="service">
        <div class="fat-camp-user" >
          <service ref="service" style="width:100%" />
        </div> 
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import rank from './module/rankList'
import service from './module/serviceList'
import pullServiceOrder from './module/pullServiceOrder'

export default {
  components: { 
    rank, service, pullServiceOrder
  },
  data () {
    return {
      activeName: 'list',
      canChangeStart: true,
      startDate: '',
      recipeId: '',
      sportType: '',
      campId: '',
      campDetail: {},
      startPicker: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      peopleCount: 0,
      videoTypeOptions: [],
      recipeOptions: []
    }
  },
  created () {
    this.activeName = this.$route.query.type || 'service'
    this.campId = this.$route.params.id
    this.getCampDetail()
    this.initParams()
    this.$nextTick(() => {
      this.handleTabClick()
    })
  },
  methods: {
    initParams() {
      //获取食谱信息
      this.$api.resource.recipe
        .optionList()
        .then(res => {
          this.recipeOptions = res.data.option_list
        }).catch(err => {
          console.log(err)
        })

      //获取视频类型
      this.$api.order.service
        .params({
          params: { keys: ['video_type'] }
        })
        .then(res => {
          this.videoTypeOptions = res.data.video_type
        }).catch(err => {
          console.log(err)
        })
    },
    setDisabled() {
      this.$confirm('修改开始时间将会影响营内客户的数据，确定要更改吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.canChangeStart = true
      }).catch(() => {
        this.canChangeStart = false
      })
    },
    getCampDetail() {
      this.$api.order.camp
        .detail(this.campId)
        .then(res => {
          this.campDetail = res.data
          this.startDate = this.campDetail.start_date
          this.recipeId = this.campDetail.recipe_id
          this.sportType = this.campDetail.sport_type
          this.peopleCount = this.campDetail.people_count
          if (this.startDate !== '') {
            this.canChangeStart = false
          }
        }).catch(err => {
          console.log(err)
        })
    },
    handleTabClick() {
      console.log(this.activeName)
      this.$refs[this.activeName].initData(this.campId)
    },
    syncChatUser() {
      this.$api.order.camp
        .syncChatUser({
          data: { camp_id: this.campId }
        }).then(res => {
          this.$notify({ title: '成功', message: '群用户信息同步成功', type: 'success', duration: 2500 })
        }).catch(err => {
          console.log(err)
        })
    },
    setStartDate() {
      if (this.startDate === '') {
        this.$notify({ title: '提示', message: '开营时间没有设置', type: 'error', duration: 2500 })
        return false
      }
      this.$confirm('开营时间一旦确定请不要轻易更改，否则会重置减脂营用户的订单周期，确认更改吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.order.camp
          .setStartDate({
            data: { camp_id: this.campId, start_date: this.startDate }
          }).then(res => {
            this.$notify({ title: '成功', message: '设置成功', type: 'success', duration: 2500 })
            this.canChangeStart = false
          }).catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({ title: '成功', message: '设置取消', type: 'info', duration: 2500 })
      })
    },
    checkinfo(id) {
      this.$router.push('/order/serviceDetail/' + id + '?tab=user')
    },
    setRecipe() {
      this.$confirm('是否确认设置食谱？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.order.camp
          .setRecipe({
            data: { camp_id: this.campId, recipe_id: this.recipeId }
          }).then(res => {
            this.$notify({ title: '成功', message: '设置成功', type: 'success', duration: 2500 })
          }).catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({ title: '成功', message: '设置取消', type: 'info', duration: 2500 })
      })
    },
    setSportType() {
      this.$confirm('是否确认设置食谱？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.order.camp
          .setSportType({
            data: { camp_id: this.campId, sport_type: this.sportType }
          }).then(res => {
            this.$notify({ title: '成功', message: '设置成功', type: 'success', duration: 2500 })
          }).catch(err => {
            console.log(err)
          })
      }).catch(() => {
        this.$message({ title: '成功', message: '设置取消', type: 'info', duration: 2500 })
      })
    }
  }
}
</script>
<style>
  .table-expand {
    font-size: 0;
  }
  .table-expand .el-form--inline .el-form-item {
    margin-right: 50px;
    margin-bottom: 10px;
  }
  .setting_time {
    margin-bottom: 20px
  }
  .setting_time .set-start{
    display:inline-block;
    width: 320px;
  }
  .setting_time .tips {
    margin: 10px 0 20px 0;
  }
  .setting_time .btn-box {
    display:inline-block;
    vertical-align: top;
  }
  .camp_pp_nm{
    display:inline-block;
    font-size: 15px;
    color: #e9ac22;
    font-weight: bold;
    padding-right: 20px;
    vertical-align: top;
    padding-top: 6px;
  }
  .camp_pp_nm span{
    color: #000;
    font-weight: normal;
  }
  .el-button+.el-button.camp-user-list{
    margin-left:20px;
    background:#f7ba2a;
    color: #fff;
    border-color:#f7ba2a ;
  }
  .rank-list-block{
    border:1px solid #d9d9d9;
    width:375px;
    margin: 10px;
  }
  .fat-camp-content{
    margin-top: 20px;
  }
  .fat-camp-user{
    padding:10px;
  }
  .card-color {
    color: #4bd633;
  }
  .info {
    color: gray;
  }
  .btn-time {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #bdbaba26;
    border: 1px solid rgba(171, 165, 165, 0.30980392156862746);
    color: #1f2d3d;
    margin: 0;
    padding: 10px 15px;
    border-radius: 4px;  
  }
  .color-block {
    border-radius: 3px;
    height: 20px;
    width: 40px;
  }
  .editorBox {
    display: inline-block;
    top: -48px;
    position: relative;
    cursor: pointer;
  }
  .editorBox .editor {
    font-size: 20px
  }
  .cycle-input input{ background: #f5fefd;   height: 40px;    line-height: 40px;   width: 200px;}
  .user-input-camp {
    margin: 0 5px 5px 0
  }
</style>
